<template>
  <p>Has published books:</p>
  <div>{{ author.books.length > 0 ? "Yes" : "No" }}</div>
  <div>{{ publishedBooksMessage }}</div>
</template>

<!--单文件组件 (SFC) -->
<script setup>
import { ref } from "vue";
import { reactive, computed } from "vue";
const author = reactive({
  name: "John Doe",
  books: [
    "Vue 2 - Advanced Guide",
    "Vue 3 - Basic Guide",
    "Vue 4 - The Mystery",
  ],
});
// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? "Yes" : "No";
});
</script>
